<template>
	<view class="page">
		<!-- 交易物流 wwl -->
		<view class="list" v-if='list && list.length > 0'>
			<view class="row_box" v-for='(item,index) in list' :key='index'>
				<view class="date">
					{{item.date}}
				</view>
				<view class="row" v-for='(row,i) in item.list' :key='i' >
						<view class="top_box" @click="onShop(row)">
							<view class="left">
								<view class="image">
									<image :src="row.user.img" mode="scaleToFill"></image>
									<text class="icon"></text>
								</view>
								<text>{{row.user.name}}</text>
							</view>
							<view class="right">
								<n-icon name="right" size="28" color="#949494"></n-icon>
							</view>
						</view>
						<view class="status">
							{{statusList.find(x=>x.id == row.status) ? '您的订单' + statusList.find(x=>x.id == row.status).name + '~' : ''}}
						</view>
						<view class="bottom_box" @click="onCommodity(row)">
							<image :src="row.img" mode="scaleToFill " class="left"></image>
							<view class="right">
								<view class="top">
									{{row.text}}
								</view>
								<view class="bottom" @click="onBtn(row)">
									<view class="btn" v-if='row.status == 1 || row.status == 2 ||  row.status == 4'>
										{{ row.status == 3 ? '联系商家' : '查看包裹位置'}}
									</view>
									<view class="text" v-else>
										签收地址是：{{row.address}}
									</view>
								</view>
							</view>
						</view>
					</view>
				
			</view>
		</view>
		<empty v-else />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				statusList: [{
					name: '未发货',
					id: 1
				}, {
					name: '派送中',
					id: 2
				}, {
					name: '已签收',
					id: 3
				}, {
					name: '已收货',
					id: 4
				}]
			}
		},
		methods: {
			onShop(row){ // type 1 设计师  2 工匠  3 商城
				if(row.type != 3 ){
					uni.navigateTo({url:`/pagesCommodity/shopDetailsDefault?type=findDesign&id=31&name=${encodeURIComponent(row.user.name)}`})
				}else{ // 建材成
					uni.navigateTo({url:`/pagesCommodity/shopDetailsBuilding?id=30&name=${encodeURIComponent(row.user.name)}`})
				}
				
			},
			onCommodity(row){
				// uni.navigateTo()
			},
			onBtn(row){
				if(row.status == 2 || row.status == 3 || row.status == 4 ){
					uni.showToast({title:'联系商家',icon:'none'})
				}else{
					uni.navigateTo({url:'/pagesMy/order/orderTracking?id=3'})
				}
			},
			getList() {
				this.list = [
					{
						date:'12:00',
						list:[
							{
								user: {
									img: 'https://img2.baidu.com/it/u=1881182452,3230762371&fm=26&fmt=auto',
									name: '设计师这是店铺名这是店铺名称这是店铺名称这是店铺名称这是店铺名称称'
								},
								img: 'https://img2.baidu.com/it/u=3043198743,485031553&fm=26&fmt=auto',
								id: 122,
								status: 1,
								type:1,
								text: '这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品'
							},
							{
								user: {
									img: 'https://img2.baidu.com/it/u=1881182452,3230762371&fm=26&fmt=auto',
									name: '这是店铺名称'
								},
								img: 'https://img2.baidu.com/it/u=3043198743,485031553&fm=26&fmt=auto',
								id: 111,
								status: 2,
								type:2,
								text: '工匠这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品'
							},
						]
					},
					{
						date:'20210909 21:11',
						list:[
							{
								user: {
									img: 'https://img2.baidu.com/it/u=1881182452,3230762371&fm=26&fmt=auto',
									name: '这是店铺名称'
								},
								img: 'https://img2.baidu.com/it/u=3043198743,485031553&fm=26&fmt=auto',
								id: 111,
								status: 3,
								type:2,
								address: '地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址',
								text: '工匠这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品'
							},
							{
								user: {
									img: 'https://img2.baidu.com/it/u=1881182452,3230762371&fm=26&fmt=auto',
									name: '这是店铺名称'
								},
								img: 'https://img2.baidu.com/it/u=3043198743,485031553&fm=26&fmt=auto',
								id: 111,
								status: 4,
								type:3,
								address: '地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址',
								text: '商城这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品这是什么商品'
							}
						]
					}
					
				]
			}
		},
		onLoad(params) {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		padding: 20rpx 36rpx 40rpx;
		box-sizing: border-box;
	}

	.list {
		.row_box{
			.date{
				padding: 25rpx 0 12rpx;
				color:#666666;
				font-size: 24rpx;
				line-height: 34rpx;
				text-align: center;
			}
		}
		.row {
			width: 100%;
			height: 344rpx;
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.05);
			margin-bottom: 32rpx;
			.status {
				width: 100%;
				box-sizing: border-box;
				padding:29rpx 30rpx 20rpx;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #000000;
				font-weight: 700;
			}

			>.top_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 30rpx 27rpx;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 2rpx solid #eaeaea;

				.left {
					width: calc(100% - 40rpx);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.image {
						position: relative;
						width: 60rpx;
						height: 60rpx;
						image {
							width: 60rpx;
							height: 60rpx;
							border-radius:50%
						}
						.icon {
							position: absolute;
							right: 0rpx;
							top:0rpx;
							width: 16rpx;
							height: 16rpx;
							background: $theme;
							border-radius: 50%;
						}
					}
					text {
						width: calc(100% - 76rpx);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			>.bottom_box {
				padding:0  30rpx 26rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.left {
					width: 120rpx;
					height: 120rpx;
				}

				.right {
					width: calc(100% - 140rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.top {
						color: #888888;
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.bottom {
						.text {
							font-size: 20rpx;
							line-height: 31rpx;
							color: #888888;
							overflow:hidden;
							text-overflow:ellispsis;
							display:-webkit-box;
							-webkit-line-clamp:2;
							-webkit-box-orient:vertical;
						}

						.btn {
							width: 224rpx;
							height: 56rpx;
							text-align: center;
							color: #000;
							font-size: 24rpx;
							font-weight: 700;
							line-height: 56rpx;
							background: #ffffff;
							border: 2rpx solid #707070;
							border-radius: 30rpx;
						}
					}
				}

			}
		}
	}
</style>
